<script lang="ts" setup>
import {
  ArrowLeft,
  ArrowRight,
} from '@element-plus/icons-vue'
import { getbxjkxllmList, getdslmList, getgblmList, getsqbxjkList, getsxrbList } from '~/api/home'
import { getImgUrl } from '~/composables/global'
import { decode, encode } from '~/utils/base/dataEncry'

const list = ref<any[]>([])
const list1 = ref<any[]>([])
const list2 = ref<any[]>([])
const list3 = ref<any[]>([])
const list4 = ref<any[]>([])
const videoList = ref<any[]>([])
// const queryParams = reactive(
//     {
//         page: {
//             rownumber: 3,
//             pageNo: 1,
//         },
//         positions: '首页'
//     },
// )
const queryParams1 = reactive(
  {
    page: {
      rownumber: 6,
      pageNo: 1,
    },
    positions: '首页',
  },
)
const queryParams2 = reactive(
  {
    page: {
      rownumber: 7,
      pageNo: 1,
    },
    positions: '首页',
  },
)
const queryParams = reactive(
  {
    page: {
      rownumber: 3,
      pageNo: 1,
    },
    condition: [],
    positions: '首页',
  },
)
function getData() {
  getsxrbList(queryParams).then((res) => {
    list.value = res.data
    
  }).catch(() => {
  })
  getsqbxjkList(queryParams).then((res) => {
    list1.value = res.data
  }).catch(() => {
  })
  getbxjkxllmList(queryParams).then((res) => {
    list2.value = res.data
  }).catch(() => {
  })


  // getbxjkxllmList(queryParams).then((res) => {
  //     res.data.forEach(item => {
  //         item.contents=item.contents.replace('font-size: 14pt;','font-size: 14px;')
  //         item.contents=item.contents.replace('<img','<div')
  //     });
  //     list.value = res.data
  // }).catch(() => {
  // })
  // getbxjkxllm(queryParams).then((res) => {
  //     res.data.forEach(item => {
  //         // item.contents=item.contents.replace('font-size: 14pt;','font-size: 14px;')
  //         // item.contents=item.contents.replace('<img','<div')
  //     });
  //     list1.value = res.data
  // }).catch(() => {
  // })
  // getsxrbList(queryParams).then((res) => {
  //     res.data.forEach(item => {
  //         item.contents=item.contents.replace('<span style="font-size: 14pt;','<span style="font-size: 14px;')
  //         item.contents=item.contents.replace('<img','<div')
  //     });
  //     list2.value = res.data
  // }).catch(() => {
  // })
  getgblmList(queryParams1).then((res) => {
    list3.value = res.data
  }).catch(() => {
  })
  getdslmList(queryParams2).then((res) => {
    list4.value = res.data.slice(0, 1)
    videoList.value = res.data.slice(1, 7)
  }).catch(() => {
  })
}
onMounted(() => {
  getData()

})
function extractTextFromPTags(htmlString: string) {
  const parser = new DOMParser()
  const doc = parser.parseFromString(htmlString, 'text/html')
  const pTags = doc.getElementsByTagName('p')
  let text = ''
  for (let i = 0; i < pTags.length; i++) {
    text += pTags[i]?.textContent
  }
  return text
}
function toList() {
  navigateTo({
    path: `/peopleHealth/peopleHealthSeries`,
    query: {
    },
  })
}
function toDetail(item: object, type: string) {
  if (type === '百姓健康系列栏目/电视栏目') {
    type = '电视栏目'
  }
  navigateTo({
    path: `/peopleHealth/bookShow/${item.id}`,
    query: {
      type,
    },
    // path: `/peopleHealth/bookShow/${type}`,
    // query: {
    //   data: encode(item),
    // },
  })
}
async function backInit() {
  location.reload()
}
const qrcodeList = [
  {
    label: '抖音',
    // url: 'https://videodocument1.obs.cn-north-9.myhuaweicloud.com/health/20240124/20240124091623745065.png',
    url: '/img/douyin.png',
  },
  // {
  //   label: '微博',
  //   url: 'http://videodocument1.obs.cn-north-9.myhuaweicloud.com/health/20240124/20240124091647819157.png',
  // },
  {
    label: '公众号',
    // url: 'http://videodocument1.obs.cn-north-9.myhuaweicloud.c#AC8358om/health/20240124/20240124091733319226.png',
    url: '/img/gzh.png',

  },
  {
    label: '视频号',
    url: '/img/sph.png',
  },
]
</script>

<template>
  <ClientOnly>
    <div class=" bg-#ffffff max-w-1200px mx-auto px-10 border-2 border-solid border-#AC8358 rounded-10px my-10">
      <div class="flex items-end justify-center pt-30px">
        <span class="mr-10px inline-block h-8px w-8px bg-#AC8358 -mt-15px" />
        <span class="px-2 font-bold" text="#1D2128 22px">书籍展示</span>
        <span class="ml-10px inline-block h-8px w-8px bg-#AC8358 -mt-15px" />
      </div>
      <div class="flex justify-center font-black font-serif -mt-10px" text="#031D2822 26px">
        Book Show
      </div>
      <div class="flex justify-between  py-6">
        <div class="w-100% flex flex-col 2xl:flex-row 2xl:justify-between">
          <div class="mb-20px w-full 2xl:mb-0 ">
            <div class="mb-10px flex justify-between">
              <div text="#1D2128 16px" class="pt-2 font-bold font-sans" style="border-bottom:5px solid #AC8358">
                新发区志
              </div>
              <div>
                <div class="m-x-4 m-t-4">
                    <NuxtLink to="/peopleHealth/peopleHealthSeries">
                        <span class=" text-#977D6A m-1 cursor-pointer">更多</span>
                    </NuxtLink>
                    <img class="flex-shrink-0 w-25px h-25px inline" src="/img/homeico.png" alt="" />
                </div>
              </div>
            </div>
            <div class=" grid cols-[repeat(auto-fit,minmax(200px,1fr))] gap-3">
              <div v-for="item in list" :key="item.id" border="1px solid #ccc"
                class="flex flex-col cursor-pointer justify-between gap-5px p-10px  max-w-200px" hover="text-#AC8358">
                <div class="flex h-200px items-center">
                  <el-image class="h-100% w-100%" :src="getImgUrl(item.cover_file_name, true)"
                    :preview-src-list="[getImgUrl(item.cover_file_name || '')]" alt="" />
                </div>
                <div class="" @click="toDetail(item, '长安县志')">
                  <div text="18px">
                    {{ item.periods }}
                  </div>
                  <div text="14px #AEAEB2" class="line-clamp-2 text-ellipsis" v-html="item.contents" />
                  <div text="14px" class="flex pl-5px pt-2">
                    <span text="#333">详情</span> <img src="/img/more.png" alt="">
                  </div>
                </div>
              </div>
              <div v-for="item in list1" :key="item.id" border="1px solid #ccc"
                class="flex flex-col cursor-pointer justify-between gap-5px p-10px max-w-200px" hover="text-#AC8358">
                <div class="h-200px flex items-center">
                  <el-image class="h-100% w-100%" :src="getImgUrl(item.cover_file_name, true)"
                    :preview-src-list="[getImgUrl(item.cover_file_name)]" alt="" />
                </div>
                <div @click="toDetail(item, '西安市志')">
                  <div text="18px">
                    {{ item.title_name }}
                  </div>
                  <div text="14px #AEAEB2 " class="line-clamp-3 text-ellipsis">
                    {{ extractTextFromPTags(item.contents) }}
                  </div>
                  <div text="14px" class="flex py-10px">
                    <span text="#333">详情</span> <img src="/img/more.png" alt="">
                  </div>
                </div>
              </div>
              <!-- <el-divider border-style="dotted" style="margin: 0;" /> -->
              <div v-for="item in list2" :key="item.id" border="1px solid #ccc"
                class="flex flex-col cursor-pointer justify-between gap-5px p-10px max-w-200px "
                hover="text-#AC8358">
                <div class="h-200px flex items-center ">
                  <el-image class="h-100% w-100%" :src="getImgUrl(item.img_url, true)"
                    :preview-src-list="[getImgUrl(item.img_url)]" alt="" />
                </div>
                <div @click="toDetail(item, '西安年鉴')">
                  <div text="18px">
                    {{ item.periods }}
                  </div>
                  <div text="14px #AEAEB2" class="line-clamp-2 text-ellipsis" v-html="item.contents" />
                  <div text="14px" class="flex pl-5px pt-2">
                    <span text="#333">详情</span> <img src="/img/more.png" alt="">
                  </div>
                </div>
              </div>


              <!-- <el-divider border-style="dotted" style="margin: 0;" /> -->

            </div>
          </div>
        </div>
      </div>
    </div>
  </ClientOnly>
</template>
